// 负责管理所有的自定义指令
// 只负责导出指令对象
// 变量名称就是指令名称
// export const imagerror = {
//   // 指令对象，会在当前的dom元素插入节点之后执行
//   inserted(dom, options) {
//     // options是指令中的变量的解释，其中有一个属性叫做value
//     // dom表示当前指令作用的dom对象
//     // dom认为此时就是图片
//     // 当图片有地址，但地址没有加载成功的时候会报错，会触发图片的一个事件 => onerror
//     dom.onerror = function() {
//       // 当图片出现异常时，会将指令配置的默认图片设置为该图片的内容
//       // dom可以注册error事件
//       // options.value就是指令传过来的值
//       dom.src = options.value // 不能写死
//     }
//   }
// }

// 适用于多种场景
export const imagerror = {
  // 指令对象，会在当前的dom元素插入节点之后执行
  // inserted在vue3中改名mounted
  // inserted只执行一次
  inserted(dom, options) {
    // options是指令中的变量的解释，其中有一个属性叫做value
    // dom表示当前指令作用的dom对象
    // dom认为此时就是图片
    // inserted执行之后，此时并没有对src赋值
    // 当图片有地址，但地址没有加载成功的时候会报错，会触发图片的一个事件 => onerror
    dom.src = dom.src || options.value // 判断初始值
    dom.onerror = function() {
      // dom可以注册error事件
      // options.value就是指令传过来的值
      dom.src = options.value // 当图片出现异常时，会将指令配置的默认图片设置为该图片的内容
    }
    // 只有src有值，并且加载失败才会触发onerror
  },
  // 此钩子会在image赋值之后执行
  // componentUpdated在vue3中改名updated
  // componentUpdated 当前指令作用的组件更新数据之后执行
  componentUpdated(dom, options) {
    dom.src = dom.src || options.value
  }
}
